<template>
  <div class="Index">
    <div class="banner wrap">
      <img src="../assets/img/banner.f559b49d.png" alt="" />
    </div>
    <div class="content">
      <div class="wrap">
        <!-- title1和imgSrc传给子组件JfTitle.vue，arr和maxLength传给List.vue -->
        <JfTitle title1="精品推荐" :imgSrc="image1"></JfTitle>
        <List :arr="jingpinArr" maxLength="4"></List>
        <JfTitle title1="热门兑换" :imgSrc="image2"></JfTitle>
        <img
          style="margin: 10px 0 30px 0"
          src="../assets/img/ad.4c6b6225.png"
          alt=""
        />
        <List :arr="remenArr" maxLength="8"></List>
      </div>
    </div>
  </div>
</template>

<script>
import { JingpinAPI } from "../request/api.js";
// import { GengduoAPI } from "../request/api.js";
import { ReMenAPI } from "../request/api.js";
import JfTitle from "@/components/index/JfTitle.vue";
import List from "@/components/index/List";
export default {
  name: "Index",
  components: { JfTitle, List },
  data() {
    return {
      jingpinArr: [],
      remenArr: [1,2,3,4,5,6],
      image1:require("@/assets/img/jingpin.png"),
      image2:require("@/assets/img/hot.png")
    };
  },
  async created() {
    // 这里的JingpinAPI就直接替换axios了,建议写成函数方便传参
    await JingpinAPI().then((res) => {
      this.jingpinArr = res.data.data.records;
      console.log(this.jingpinArr);
    });

    // await GengduoAPI().then((res) => {
    //   console.log(res);
    // });

    await ReMenAPI().then((res2) => {
      this.remenArr = res2.data.data.records;
      console.log(this.remenArr);
    });
  },
  mounted() {},

  methods: {},
};
</script>

<style>
.sy {
  font-size: 20px;
}
</style>